<template>
  <svg
    :class="svgClass"
    :fill="iconColor"
    aria-hidden="true"
    :style="font"
    @click="onClick"
  >
    <use :xlink:href="iconClass"></use>
  </svg>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class IconSvg extends Vue {
  @Prop({ required: true }) private iconName!: string
  @Prop({ default: '#666' }) private iconColor!: string
  @Prop() private fontSize!: string | number
  private name: string = 'icon-svg'
  private data(): object {
    return {
      isCommon: true,
    }
  }
  private get font() {
    return this.fontSize ? 'font-size:' + this.fontSize + 'px' : ''
  }
  private get iconClass() {
    return `#icon-${this.iconName}`
  }
  private get svgClass() {
    return this.iconName ? 'svg-icon ' + this.iconName : 'svg-icon'
  }
  private onClick() {
    this.$emit('click')
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
}
</style>
